<template>
  <div class="wrapper">
    <div class="swiper-container">
     <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in swiperList" :key="item.id">
          <img class="swiper-img" :src="item.imgUrl" alt="">
        </div>
      </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
   </div>
  </div>
</template>

<script>
import Swiper, { Pagination, Autoplay } from 'swiper'
import 'swiper/swiper-bundle.css'
Swiper.use([Pagination, Autoplay])
export default {
  props: {
    swiperList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      swiper: ''
    }
  },
  mounted () {
    this.initSwiper()
  },
  methods: {
    initSwiper () {
      this.swiper = new Swiper('.wrapper .swiper-container', {
        loop: true,
        slidesPerView: 1.2,
        centeredSlides: true,
        pagination: {
          el: '.swiper-pagination'
        },
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .wrapper
   height 2.5rem
   .swiper-container
    --swiper-pagination-color: #00ff33;
   .swiper-slide
    .swiper-img
      width 100%
      height 100%
      transform scale(0.9)
      transition 0.3s
      margin-top .2rem
      border-radius .2rem
    &.swiper-slide-active
      .swiper-img
       transform  scale(1)
</style>
